<template>
  <div class="bianjishangpin">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div
          style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;"
          class="flexbc"
        >
          <div class="flexcc fanhui" @click="back">
            <div>
              <i class="el-icon-arrow-left" style="margin-right: 5px;"></i>
            </div>
            <div>返回</div>
          </div>
          <top></top>
        </div>
        <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
          <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
            <div>
              <img src="../../../static/img/bianji1.png" style="width: 22px; margin-right: 10px;" />
            </div>
            <div>编辑商品信息</div>
          </div>

          <el-form ref="form" :model="form">
            <div class="baibeijing" style="width: 780px;">
              <el-form-item>
                <div class="flexc">
                  <div v-if="!shangpinyeshow">
                    <div>商品名称</div>
                    <div>
                      <el-input v-model="form.title" style="width: 360px;"></el-input>
                    </div>
                  </div>
                  <div v-if="shangpinyeshow">
                    <div>商品名称</div>
                    <div>
                      <el-input v-model="form.sale_name" style="width: 360px;"></el-input>
                    </div>
                  </div>
                  <div v-if="shangpinyeshow && $route.query.one" style="margin-left: 20px;">
                    <div>页面名称（订单来源）</div>
                    <div>
                      <el-input v-model="form.page_source" style="width: 360px;"></el-input>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <div>
                  <div>售价</div>
                  <div>
                    <el-input
                      class="t_yuan"
                      v-model="form.card_cost"
                      style="width: 360px;"
                      :disabled="!form.wx_switch&&!form.ali_switch"
                    >
                      <template slot="append">元</template>
                    </el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <div>
                  <div>提卡费</div>
                  <div>
                    <el-input
                      class="t_yuan"
                      v-model="form.card_fee"
                      style="width: 360px;"
                    >
                      <template slot="append">元</template>
                    </el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item v-if="!shangpinyeshow">
                <div class="flexc">
                  <div style="margin-right: 20px;">
                    <div>库存</div>
                    <div>
                      <el-input
                        v-model="form.inventory"
                        style="width: 360px"
                        placeholder="输入0或者不填为无限制"
                      ></el-input>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item v-if="form.take_number >0">
                <div class="flexc">
                  <div>
                    <div>该商品支持选号</div>
                    <div>
                      <el-radio v-model="form.is_pick_num" :label="1">开启</el-radio>
                      <el-radio v-model="form.is_pick_num" :label="0">关闭</el-radio>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="flexc">
                  <div style="margin-right: 20px;">
                    <div>注意点</div>
                    <div>
                      <el-input v-model="form.points" style="width: 360px;"></el-input>
                    </div>
                  </div>
                  <div v-if="shangpinyeshow">
                    <div>自定义下单按钮名称</div>
                    <div>
                      <el-input v-model="form.order_button" style="width: 360px;"></el-input>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <div>卖点</div>
                <div class="flex">
                  <div>
                    <el-input
                      v-model="form.selling_point[0]"
                      style="width: 160px; margin-right: 10px;"
                    ></el-input>
                  </div>
                  <div>
                    <el-input
                      v-model="form.selling_point[1]"
                      style="width: 160px; margin-right: 10px;"
                    ></el-input>
                  </div>
                  <div>
                    <el-input
                      v-model="form.selling_point[2]"
                      style="width: 160px; margin-right: 10px;"
                    ></el-input>
                  </div>
                  <div>
                    <el-input
                      v-model="form.selling_point[3]"
                      style="width: 160px; margin-right: 10px;"
                    ></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <div>月租</div>
                <div>
                  <el-input v-model="form.yuezu" style="width: 360px;"></el-input>
                </div>
              </el-form-item>
              <el-form-item>
                <div>通话时长</div>
                <div class="flexc">
                  <div>
                    <el-radio v-model="form.yuyin_type" :label="0">含语音</el-radio>
                  </div>
                  <div v-if="form.yuyin_type == 0" style="margin: 0 10px;">
                    <el-input v-model="form.yuyin" placeholder="请输入套餐分钟数" style="width: 150px;"></el-input>
                  </div>
                  <div style="margin: 0 10px;" v-if="form.yuyin_type == 0">分钟</div>
                  <div style="margin: 0 10px;">
                    <el-radio v-model="form.yuyin_type" :label="1">不含语音</el-radio>
                  </div>
                  <div style="margin: 0 10px;" v-if="form.yuyin_type == 1">
                    <el-input v-model="form.yuyin" placeholder="请输入价格数字" style="width: 150px;"></el-input>
                  </div>
                  <div style="margin: 0 10px;" v-if="form.yuyin_type == 1">元/分钟</div>
                </div>
              </el-form-item>
              <!-- <el-form-item>
                  <div>通话时长</div>
                  <div><el-input v-model="form.yuyin" style="width: 360px;"></el-input></div>
              </el-form-item>-->
              <el-form-item>
                <div>通用流量</div>
                <div>
                  <el-input v-model="form.liuliang" style="width: 360px;"></el-input>
                </div>
              </el-form-item>
              <el-form-item>
                <div>定向流量</div>
                <div>
                  <el-input v-model="form.dx_liuliang" style="width: 360px;">缺</el-input>
                </div>
              </el-form-item>
              <!-- <el-form-item>
                  <div>售价</div>
                  <div><el-input v-model="form.card_cost" style="width: 360px;"></el-input></div>
              </el-form-item>-->
              <div class="flex">
                <el-form-item style="margin-right: 20px;">
                  <div>商品主图</div>
                  <div>
                    <chuantu
                      :widths="'200px'"
                      :heights="'200px'"
                      :widths2="'200px'"
                      :heights2="'200px'"
                      :imgs="form.image1"
                      @getimg="getimg"
                      v-if="relo"
                    ></chuantu>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div>商品分享图</div>
                  <div>
                    <chuantu
                      :widths="'200px'"
                      :heights="'200px'"
                      :widths2="'200px'"
                      :heights2="'200px'"
                      :imgs="form.share_img"
                      @getimg="getimg2"
                      v-if="relo"
                    ></chuantu>
                  </div>
                </el-form-item>
              </div>
              <el-form-item>
                <div class="flexc">
                  <div style="margin-right: 20px;">入网协议展示</div>
                  <div>
                    <el-switch
                      v-model="form.pact_have"
                      style="width: 46px; height: 21px;"
                      active-color="rgb(0, 90, 255);"
                      inactive-color="rgb(246, 248, 251);"
                      :active-value="1"
                      :inactive-value="0"
                    ></el-switch>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="flexc">
                  <el-select
                    v-model="form.pact_ids"
                    multiple
                    filterable
                    collapse-tags
                    style="width: 360px;"
                    placeholder="请选择协议"
                  >
                    <el-option
                      :label="item.title"
                      :value="item.id.toString()"
                      v-for="item in xieyilist"
                      :key="item.id"
                    ></el-option>
                  </el-select>
                  <div
                    style="margin: 0 20px; color:rgb(0, 90, 255) ; cursor: pointer;"
                    @click="go('/xieyi')"
                  >管理协议</div>

                  <!-- <div style="margin-right: 10px;">用户端默认勾选</div>
                    <div><el-checkbox v-model="form.pact_check"  :true-label="1" :false-label="0"></el-checkbox></div>
                    <div>
                      <el-tooltip class="item" effect="dark" content="使用默认勾选后用户下单时无需再点击勾选,此操作不合规,请谨慎使用" placement="top-start">
                          <div><i class="el-icon-question" style="color: rgb(255, 168, 168); margin-left: 10px; font-size: 20px; position: relative; top: 3px;"></i></div>
                      </el-tooltip>
                  </div>-->
                </div>
              </el-form-item>
              <el-form-item v-if="form.pact_have">
                <div style="margin-right: 10px;">协议设置</div>
                <div class="flexc">
                  <el-select
                    style="width: 360px;"
                    v-model="form.pact_check"
                    @change="choosexyset"
                    placeholder="请选择要展示的协议"
                  >
                    <el-option :value="2" label="用户需勾选同意协议才能下单"></el-option>
                    <el-option :value="1" label="默认替用户勾选同意协议"></el-option>
                    <el-option :value="3" label="用户不勾选同意协议也可下单"></el-option>
                  </el-select>
                  <el-checkbox
                    style="margin-left: 20px;"
                    :true-label="1"
                    :false-label="0"
                    v-model="form.protocol_qz"
                  ></el-checkbox>
                  <div style="margin-left: 5px;">用户勾选同意时强制展示协议内容</div>

                  <!-- <div><el-checkbox v-model="form.pact_check"  :true-label="1" :false-label="0"></el-checkbox></div>
                    <div>
                      <el-tooltip class="item" effect="dark" content="使用默认勾选后用户下单时无需再点击勾选,此操作不合规,请谨慎使用" placement="top-start">
                          <div><i class="el-icon-question" style="color: rgb(255, 168, 168); margin-left: 10px; font-size: 20px; position: relative; top: 3px;"></i></div>
                      </el-tooltip>
                  </div>-->
                </div>
              </el-form-item>
              <el-form-item>
                <div>商品详情</div>
                <div>
                  <fuwenben :content="form.description" @getcontent="getcontent" v-if="relo"></fuwenben>
                </div>
              </el-form-item>
            </div>
            <!-- 商品页专用 -->
            <div v-if="shangpinyeshow">
              <div
                class="flexc"
                style="font-size: 16px; font-weight: bold; margin-bottom: 20px; margin-top: 30px;"
              >
                <div>
                  <img
                    src="../../../static/img/bianji1.png"
                    style="width: 22px; margin-right: 10px;"
                  />
                </div>
                <div>商品下单信息填写配置</div>
              </div>
              <div class="baibeijing" style="width: 780px;">
                <el-form-item>
                  <div class="flex">
                    <div style="width: 210px;">身份证信息填写</div>
                    <div>
                      <el-switch
                        v-model="form.need_idcard"
                        @change="changeneed_idcard()"
                        style="width: 46px; height: 21px;"
                        active-color="rgb(0, 90, 255);"
                        inactive-color="rgb(246, 248, 251);"
                        :active-value="1"
                        :inactive-value="0"
                      ></el-switch>
                    </div>
                  </div>
                </el-form-item>

                <el-form-item>
                  <div class="flexc">
                    <div style="width: 210px;">收货人使用身份证姓名</div>
                    <div>
                      <el-switch
                        v-model="form.same_name"
                        :disabled="form.need_idcard == 0"
                        style="width: 46px; height: 21px;"
                        active-color="rgb(0, 90, 255);"
                        inactive-color="rgb(246, 248, 251);"
                        :active-value="1"
                        :inactive-value="0"
                      ></el-switch>
                    </div>
                    <div style="color: rgb(175, 179, 188); margin-left: 10px;">提示：开启身份证信息填写后可用</div>
                    <!-- <div class="flexcc">
                      <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                          <div><i class="el-icon-question" style="color: rgb(255, 168, 168); margin-left: 10px; font-size: 20px; position: relative; top: 3px;"></i></div>
                      </el-tooltip>
                    </div>-->
                  </div>
                </el-form-item>

                <el-form-item>
                  <div class="flex">
                    <div style="width: 210px;">身份证照片上传</div>
                    <div>
                      <el-switch
                        v-model="form.is_need_photo"
                        style="width: 46px; height: 21px;"
                        active-color="rgb(0, 90, 255);"
                        inactive-color="rgb(246, 248, 251);"
                        :active-value="1"
                        :inactive-value="0"
                      ></el-switch>
                    </div>
                    <div style="color: rgb(175, 179, 188); margin-left: 10px;">提示：检测到当前选择的商品需要照片</div>

                    <el-checkbox style="margin-right: 10px; margin-left: 20px;" :true-label="1" :false-label="0" v-model="form.is_need_custom_photo"></el-checkbox>
                    <div style="margin-right: 10px;" >添加自定义上传图片</div>

                    <div style="padding-left: 200px;">
                      <div style="margin:0;">上传内容描述:</div>
                      <el-input v-model="form.custom_photo_description" style="width: 220px;" placeholder="上传内容描述"></el-input>
                    </div>



                    <div class="kflex" style="margin-left: 20px;" >
                      <div style="margin:0;">上传内容示例图:</div>
                      <chuantu
                        :widths="'200px'"
                        :heights="'200px'"
                        :widths2="'200px'"
                        :heights2="'200px'"
                        :imgs="form.custom_photo_illustration"
                        @getimg="getimg3"
                        v-if="relo"
                      ></chuantu>
                    </div>
                  </div>
                </el-form-item>

                <el-form-item>
                  <div class="flex">
                    <div style="width: 210px;">提单信息填写展示方式</div>

                    <div class="flexc">
                      <!-- <div class="flexc">
                        <el-radio v-model="form.show_type" :label="0" style="margin-right: 0;">逐渐显示填写信息</el-radio>
                        <div class="flexcc">
                          <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                              <div><i class="el-icon-question" style="color: rgb(255, 168, 168); margin-left: 10px; font-size: 20px; position: relative; top: 3px;"></i></div>
                          </el-tooltip>
                        </div>
                      </div>-->
                      <div class="flexc" style="margin-left: 20px;">
                        <el-radio
                          v-model="form.show_type"
                          :label="1"
                          style="margin-right: 0;"
                        >直接列出全部填写信息</el-radio>
                        <!-- <div class="flexcc">
                          <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                              <div><i class="el-icon-question" style="color: rgb(255, 168, 168); margin-left: 10px; font-size: 20px; position: relative; top: 3px;"></i></div>
                          </el-tooltip>
                        </div>-->
                      </div>
                    </div>
                  </div>
                </el-form-item>
              </div>

              <div
                class="flexc"
                style="font-size: 16px; font-weight: bold; margin-bottom: 20px; margin-top: 30px;"
              >
                <div>
                  <img
                    src="../../../static/img/bianji1.png"
                    style="width: 22px; margin-right: 10px;"
                  />
                </div>
                <div>用户下单限制设置</div>
              </div>

              <div class="baibeijing" style="width: 780px;">
                <el-form-item>
                  <div class="flexc">
                    <div style="margin-right: 20px;">下单需要验证码</div>
                    <div>
                      <el-switch
                        v-model="form.code_verify"
                        style="width: 46px; height: 21px;"
                        active-color="rgb(0, 90, 255);"
                        inactive-color="rgb(246, 248, 251);"
                        :active-value="1"
                        :inactive-value="0"
                      ></el-switch>
                    </div>
                    <div
                      style="margin-left:10px; font-size:12px;"
                    >短信费用计入敢探号消费，会在对应的敢探号账号上产生消费明细 0.05元/条</div>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="flex">
                    <div style="margin-right: 20px;">下单年龄限制</div>
                    <div>
                      <el-switch
                        v-model="form.age_limit"
                        style="width: 46px; height: 21px;"
                        active-color="rgb(0, 90, 255);"
                        inactive-color="rgb(246, 248, 251);"
                        :active-value="1"
                        :inactive-value="0"
                      ></el-switch>
                    </div>
                  </div>
                  <div class="flexc">
                    <div style="margin-right: 20px;  color: rgb(212, 215, 222);">允许下单的年龄范围</div>
                    <div>
                      <el-input v-model="form.min_age" style="width: 140px;"></el-input>
                    </div>
                    <div style="margin: 0 10px;">~</div>
                    <div>
                      <el-input v-model="form.max_age" style="width: 140px;"></el-input>
                    </div>
                  </div>
                </el-form-item>

                <el-form-item style="margin-top: 10px;">
                  <div class="flex">
                    <div style="margin-right: 20px;">下单数量限制</div>
                    <div>
                      <el-switch
                        v-model="form.limit_open"
                        style="width: 46px; height: 21px;"
                        active-color="rgb(0, 90, 255);"
                        inactive-color="rgb(246, 248, 251);"
                        :active-value="1"
                        :inactive-value="0"
                      ></el-switch>
                    </div>
                  </div>
                  <div class="flex">
                    <div class="flexc">
                      <div style="width: 100px; color: rgb(212, 215, 222);">选择限制数量</div>
                      <div>
                        <el-select v-model="form.limit" style="width: 100%;" placeholder="请选择限制数量">
                          <el-option label="不限制" value="0"></el-option>
                          <el-option label="1" value="1"></el-option>
                          <el-option label="2" value="2"></el-option>
                          <el-option label="3" value="3"></el-option>
                          <el-option label="4" value="4"></el-option>
                          <el-option label="5" value="5"></el-option>
                        </el-select>
                      </div>
                    </div>
                    <div class="flexc">
                      <div
                        style="width: 100px; color: rgb(212, 215, 222); margin-left: 30px;"
                      >识别方式选择</div>
                      <div>
                        <el-select
                          v-model="form.limit_type"
                          style="width: 100%;"
                          placeholder="请选识别方式选择"
                        >
                          <el-option label="证件号" :value="0"></el-option>
                          <el-option label="手机号" :value="1"></el-option>
                          <el-option label="IP地址" :value="2"></el-option>
                        </el-select>
                      </div>
                    </div>
                  </div>

                  <div style="margin-bottom: 20px;">
                    <div>不发货地区设置</div>
                    <div>
                      <div class="flexc" style="padding-bottom: 20px;">
                        <div style="margin-right: 20px;">
                          <el-radio v-model="form.deliver_type" :label="2">使用敢探号产品的不发货区域</el-radio>
                        </div>
                        <div style="margin-right: 20px;">
                          <el-radio v-model="form.deliver_type" :label="1">设置不发货区域</el-radio>
                        </div>
                        <div>
                          <el-radio v-model="form.deliver_type" :label="3">设置只发货区域</el-radio>
                        </div>
                      </div>
                      <div
                        style="background: rgb(241, 241, 241); padding-bottom: 20px;"
                        v-if="form.deliver_type == 1"
                      >
                        <div
                          style="color: #999; font-size: 12px; padding: 10px 23px;"
                        >设置后用户只能选择选中的省市为收货地址</div>
                        <div style="padding-left: 23px;">
                          <el-cascader
                            :options="options"
                            v-model="form.nodeliver_area"
                            style="width: 400ox;"
                            collapse-tags
                            :props="props"
                            clearable
                          ></el-cascader>
                        </div>
                      </div>
                      <div
                        style="background: rgb(241, 241, 241); padding-bottom: 20px;"
                        v-if="form.deliver_type == 3"
                      >
                        <div
                          style="color: #999; font-size: 12px; padding: 10px 23px;"
                        >设置后用户不能选择选中的省市为收货地址</div>
                        <div style="padding-left: 23px;">
                          <el-cascader
                            ref="test"
                            :options="options"
                            v-model="form.deliver_area"
                            style="width: 400ox;"
                            collapse-tags
                            :props="props"
                            clearable
                            @change="test"
                          ></el-cascader>
                        </div>
                      </div>
                      <div
                        style=" background: rgb(241, 241, 241); padding:0 20px;"
                        v-if="form.deliver_type == 3"
                      >
                        <div class="flexc">
                          <div style="line-height: 32px;">批量上传地址</div>
                          <div style="margin-left: 10px;">
                            <el-upload :show-file-list="false" action="#" :http-request="upup">
                              <el-button type="text">点击上传</el-button>
                            </el-upload>
                          </div>
                          <el-button type="text" @click="down" style="margin-left: 50px;">模板下载</el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-form-item>
              </div>
            </div>

            <el-button type="primary" round style="margin: 44px 0;" @click="xiugai">保存</el-button>
          </el-form>
          <!-- <footers></footers> -->
        </div>
      </div>
    </div>

    <div v-if="shoujiban" style=" color: rgb(2, 12, 29); font-size: 0.24rem; background: #f6f8fb;">
      <van-nav-bar title="编辑商品信息" left-text="返回" left-arrow @click-left="onClickLeft" />

      <div>
        <div style="background: #fff; padding: 0.2rem; border-radius: 0.2rem;">
          <el-form ref="form" :model="form">
            <div v-if="!shangpinyeshow" class="title_input_box">
              <div style="font-size:14px;color:#404247">商品名称</div>
              <div>
                <el-input v-model="form.title" placeholder="请输入商品名称" class="title_input"></el-input>
              </div>
            </div>
           <div class="title_input_box" style="margin-top:10px">
              <div style="font-size:14px;color:#404247">售价</div>

              <div>
                <el-input
                  class="title_input"
                  v-model="form.card_cost"
                  placeholder="售价"
                  :disabled="!form.wx_switch&&!form.ali_switch"
                ></el-input>
              </div>
            </div>
             <div class="title_input_box" style="margin-top:10px">
              <div style="font-size:14px;color:#404247">库存</div>
              <div>
                <el-input
                  class="title_input"
                  v-model="form.inventory"
                  placeholder="库存"
                ></el-input>
              </div>
            </div>
            <div v-if="shangpinyeshow" class="title_input_box">
              <div style="font-size:14px;color:#404247">商品名称</div>
              <div>
                <el-input v-model="form.sale_name" placeholder="请输入商品名称" class="title_input"></el-input>
              </div>
            </div>
            <div v-if="shangpinyeshow && $route.query.one">
              <div style="margin: 0.1rem 0;">请输入页面名称（订单来源）</div>
              <div>
                <el-input
                  v-model="form.page_source"
                  style="width: 100%;"
                  placeholder="请输入页面名称（订单来源）"
                ></el-input>
              </div>
            </div>
            <div class="title_input_box" style="margin-top:10px">
              <div style="font-size:14px;color:#404247">注意点</div>
              <div>
                <el-input v-model="form.points" class="title_input" placeholder="请输入注意点"></el-input>
              </div>
            </div>
            <div v-if="shangpinyeshow" class="title_input_box" style="margin-top:10px">
              <div style="font-size:14px;color:#404247">下单名称</div>
              <div>
                <el-input v-model="form.order_button" class="title_input" placeholder="请输入下单名称"></el-input>
              </div>
            </div>

            <div>
              <div style="margin: 0.1rem 0;font-size:14px;margin-top:10px">卖点</div>
              <div class="flexbc" style="width: 100%;">
                <div style="width: 48%;">
                  <el-input
                    v-model="form.selling_point[0]"
                    class="point_inpt"
                    style="margin-bottom: 0.2rem; width: 100%;"
                    placeholder="卖点一"
                  ></el-input>
                </div>
                <div style="width: 48%;">
                  <el-input
                    v-model="form.selling_point[1]"
                    class="point_inpt"
                    style="margin-bottom: 0.2rem; width: 100%;"
                    placeholder="卖点二"
                  ></el-input>
                </div>
                <div style="width: 48%;">
                  <el-input
                    v-model="form.selling_point[2]"
                    class="point_inpt"
                    style="margin-bottom: 0.1rem; width: 100%;"
                    placeholder="卖点三"
                  ></el-input>
                </div>
                <div style="width: 48%;">
                  <el-input
                    v-model="form.selling_point[3]"
                    class="point_inpt"
                    style="margin-bottom: 0.1rem; width: 100%;"
                    placeholder="卖点四"
                  ></el-input>
                </div>
              </div>
            </div>
            <div class="title_input_box" style="margin-top:10px">
              <div style="font-size:14px;color:#404247">月租</div>
              <div>
                <el-input v-model="form.yuezu" class="title_input" placeholder="请输入月租"></el-input>
              </div>
            </div>
            <!-- <div>
              <div style="margin: 0.1rem 0;">通话时长</div>
              <div><el-input v-model="form.yuyin" style="width: 100%;" placeholder="请输入通话时长"></el-input></div>
            </div>-->
            <el-form-item>
              <div>通话时长</div>
              <div class="flexc">
                <div>
                  <el-radio v-model="form.yuyin_type" :label="0">含语音</el-radio>
                </div>
                <div v-if="form.yuyin_type == 0" style="margin: 0 10px;">
                  <el-input
                    v-model="form.yuyin"
                    class="voice_input"
                    placeholder="请输入套餐分钟数"
                    style="width: 80px;"
                  ></el-input>
                </div>
                <div style="margin: 0 10px;" v-if="form.yuyin_type == 0">分钟</div>
                <div style="margin: 0 10px;">
                  <el-radio v-model="form.yuyin_type" :label="1">不含语音</el-radio>
                </div>
                <div style="margin: 0 10px;" v-if="form.yuyin_type == 1">
                  <el-input
                    v-model="form.yuyin"
                    class="voice_input"
                    placeholder="请输入价格数字"
                    style="width: 80px;"
                  ></el-input>
                </div>
                <div style="margin: 0 10px;" v-if="form.yuyin_type == 1">元/分钟</div>
              </div>
            </el-form-item>
            <div class="title_input_box" style="margin-top:10px">
              <div style="font-size:14px;color:#404247">通用流量</div>
              <div>
                <el-input v-model="form.liuliang" class="title_input" placeholder="请输入通用流量"></el-input>
              </div>
            </div>
            <div class="title_input_box" style="margin-top:10px">
              <div style="font-size:14px;color:#404247">定向流量</div>
              <div>
                <el-input v-model="form.dx_liuliang" class="title_input" placeholder="请输入定向流量"></el-input>
              </div>
            </div>
            <div style="margin: 0.2rem 0;font-size:14px">上传图片</div>
            <div class="flex upload_box">
              <div>
                <div style="font-size:14px;color:#404247;margin-bottom:0.2rem">商品主图</div>
                <div>
                  <chuantu
                    style="background:white"
                    :widths="'80px'"
                    :heights="'80px'"
                    :widths2="'80px'"
                    :heights2="'80px'"
                    :imgs="form.image1"
                    @getimg="getimg"
                    v-if="relo"
                  ></chuantu>
                </div>
              </div>
              <div style="margin-left:0.3rem">
                <div style="font-size:14px;color:#404247;margin-bottom:0.2rem">商品分享图</div>
                <div>
                  <chuantu
                    style="background:white"
                    :widths="'80px'"
                    :heights="'80px'"
                    :widths2="'80px'"
                    :heights2="'80px'"
                    :imgs="form.share_img"
                    @getimg="getimg2"
                    v-if="relo"
                  ></chuantu>
                </div>
              </div>
            </div>
            <div>
              <div
                class="flexc"
                style="margin: 0.2rem 0;display:flex;justify-content:space-between;"
              >
                <div style="font-size:14px">入网协议展示</div>
                <div>
                  <el-switch
                    v-model="form.pact_have"
                    style="width: 46px; height: 21px;"
                    active-color="rgb(0, 90, 255);"
                    inactive-color="rgb(246, 248, 251);"
                    :active-value="1"
                    :inactive-value="0"
                  ></el-switch>
                </div>
              </div>
            </div>
            <!-- <div class="title_input_boxs">
              <div style="font-size:14px;color:#404247;">入网协议</div>
              <div>
                {{dealList.title}}
              </div>
              <img
                @click="checkoutClick"
                src="../../../static/appimg/right.png"
                alt
                style="height:10px"
              />
            </div> -->
            <!-- <div class="title_input_box" style="margin-top:10px"> -->
            <!-- <div style="font-size:14px;color:#404247">入网协议</div>
              <div>
              <div><el-input  class="title_input" placeholder="请输入"></el-input></div>

            </div>-->
            <div class="title_input_box">
              <div style="font-size:14px;color:#404247">入网协议</div>
                <el-select  class="title_input"  v-model="form.pact_ids" multiple filterable collapse-tags  placeholder="请选择协议">
                 <el-option  :label="item.title" :value="item.id.toString()" v-for="item in xieyilist" :key="item.id"> </el-option>
                </el-select>
            </div>
            <!-- </div> -->
            <div
              style="margin: 0.2rem 0; color:rgb(0, 90, 255) ; cursor: pointer;font-size:14px"
              @click="go('/xieyi')"
            >管理协议</div>

            <div v-if="form.pact_have" class="title_input_box" style="margin-top:10px">
              <span style="font-size:14px;color:#404247">协议设置</span>
              <div class="flexc">
                <el-select
                  style="width: 260px;"
                  v-model="form.pact_check"
                  class="title_input"
                  @change="choosexyset"
                  placeholder="请选择要展示的协议"
                >
                  <el-option :value="2" label="用户需勾选同意协议才能下单"></el-option>
                  <el-option :value="1" label="默认替用户勾选同意协议"></el-option>
                  <el-option :value="3" label="用户不勾选同意协议也可下单"></el-option>
                </el-select>
              </div>
            </div>
            <div class="deal_checkbox">
              <el-checkbox :true-label="1" :false-label="0" v-model="form.protocol_qz"></el-checkbox>
              <div style="margin-left: 5px;">用户勾选同意时强制展示协议内容</div>
            </div>
            <div>
              <div style="margin: 0.2rem 0;font-size:14px">商品详情</div>
              <div class="Richtext">
                <fuwenben :content="form.description" @getcontent="getcontent" v-if="relo"></fuwenben>
              </div>
            </div>

            <!-- 商品页专用 -->
            <div v-if="shangpinyeshow">
              <div
                class="flexc"
                style="font-size: 16px; font-weight: bold; margin-bottom: 20px; margin-top: 30px;"
              >
                <div>
                  <img
                    src="../../../static/img/bianji1.png"
                    style="width: 22px; margin-right: 10px;"
                  />
                </div>
                <div>商品下单信息填写配置</div>
              </div>
              <div class="baibeijing">
                <div>
                  <div>
                    <div style="margin: 0.1rem 0;">身份证信息填写</div>
                    <div>
                      <el-switch
                        v-model="form.need_idcard"
                        @change="changeneed_idcard()"
                        style="width: 46px; height: 21px;"
                        active-color="rgb(0, 90, 255);"
                        inactive-color="rgb(246, 248, 251);"
                        :active-value="1"
                        :inactive-value="0"
                      ></el-switch>
                    </div>
                  </div>
                </div>

                <div>
                  <div>
                    <div style="margin: 0.1rem 0;">收货人使用身份证姓名</div>
                    <div>
                      <el-switch
                        v-model="form.same_name"
                        :disabled="form.need_idcard == 0"
                        style="width: 46px; height: 21px;"
                        active-color="rgb(0, 90, 255);"
                        inactive-color="rgb(246, 248, 251);"
                        :active-value="1"
                        :inactive-value="0"
                      ></el-switch>
                      <span style="color: rgb(175, 179, 188); margin-left: 10px;">提示：开启身份证信息填写后可用</span>
                    </div>
                  </div>
                </div>

                <div>
                  <div>
                    <div style="margin: 0.1rem 0;">身份证照片上传</div>
                    <div>
                      <el-switch
                        v-model="form.is_need_photo"
                        style="width: 46px; height: 21px;"
                        active-color="rgb(0, 90, 255);"
                        inactive-color="rgb(246, 248, 251);"
                        :active-value="1"
                        :inactive-value="0"
                      ></el-switch>
                      <span style="color: rgb(175, 179, 188); margin-left: 10px;">提示：检测到当前选择的商品需要照片</span>
                    </div>

                    <el-checkbox style="margin-right: 10px; margin-left: 20px;" :true-label="1" :false-label="0" v-model="form.is_need_custom_photo"></el-checkbox>
                    <div style="margin-right: 10px;">添加自定义上传图片</div>
                    <el-input v-model="form.custom_photo_description" style="width: 220px;" placeholder="上传内容描述"></el-input>
                  </div>
                </div>

                <div>
                  <div>
                    <div style="margin: 0.1rem 0;">提单信息填写展示方式</div>

                    <div class="flexc">
                      <!-- <div class="flexc">
                        <el-radio v-model="form.show_type" :label="0" style="margin-right: 0;">逐渐显示填写信息</el-radio>
                        <div class="flexcc">
                          <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                              <div><i class="el-icon-question" style="color: rgb(255, 168, 168); margin-left: 10px; font-size: 20px; position: relative; top: 3px;"></i></div>
                          </el-tooltip>
                        </div>
                      </div>-->
                      <div class="flexc">
                        <el-radio
                          v-model="form.show_type"
                          :label="1"
                          style="margin-right: 0;"
                        >直接列出全部填写信息</el-radio>
                        <!-- <div class="flexcc">
                          <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                              <div><i class="el-icon-question" style="color: rgb(255, 168, 168); margin-left: 10px; font-size: 20px; position: relative; top: 3px;"></i></div>
                          </el-tooltip>
                        </div>-->
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div
                class="flexc"
                style="font-size: 16px; font-weight: bold; margin-bottom: 20px; margin-top: 30px;"
              >
                <div>
                  <img
                    src="../../../static/img/bianji1.png"
                    style="width: 22px; margin-right: 10px;"
                  />
                </div>
                <div>用户下单限制设置</div>
              </div>

              <div class="baibeijing">
                <div>
                  <div>
                    <div style="margin: 0.1rem 0;">下单年龄限制</div>
                    <div>
                      <el-switch
                        v-model="form.age_limit"
                        style="width: 46px; height: 21px;"
                        active-color="rgb(0, 90, 255);"
                        inactive-color="rgb(246, 248, 251);"
                        :active-value="1"
                        :inactive-value="0"
                      ></el-switch>
                    </div>
                  </div>
                  <div>
                    <div style="margin: 0.1rem 0;  color: rgb(212, 215, 222);">允许下单的年龄范围</div>
                    <div class="flexc">
                      <div style="width: 2.5rem;">
                        <el-input v-model="form.min_age"></el-input>
                      </div>
                      <div style="margin: 0 10px;">~</div>
                      <div style="width: 2.5rem;">
                        <el-input v-model="form.max_age"></el-input>
                      </div>
                    </div>
                  </div>
                </div>

                <div style="margin-top: 10px;">
                  <div>
                    <div style=" margin: 0.1rem 0; ">下单数量限制</div>
                    <div>
                      <el-switch
                        v-model="form.limit_open"
                        style="width: 46px; height: 21px;"
                        active-color="rgb(0, 90, 255);"
                        inactive-color="rgb(246, 248, 251);"
                        :active-value="1"
                        :inactive-value="0"
                      ></el-switch>
                    </div>
                  </div>
                  <div>
                    <div class="flexc" style="margin-bottom: 0.2rem;">
                      <div style="margin: 0.1rem 0.1rem 0.1rem 0;">选择限制数量</div>
                      <div>
                        <el-select v-model="form.limit" style="width: 100%;" placeholder="请选择限制数量">
                          <el-option label="不限制" value="0"></el-option>
                          <el-option label="1" value="1"></el-option>
                          <el-option label="2" value="2"></el-option>
                          <el-option label="3" value="3"></el-option>
                          <el-option label="4" value="4"></el-option>
                          <el-option label="5" value="5"></el-option>
                        </el-select>
                      </div>
                    </div>
                    <div class="flexc">
                      <div style="margin: 0.1rem 0.1rem 0.1rem 0;">识别方式选择</div>
                      <div>
                        <el-select
                          v-model="form.limit_type"
                          style="width: 100%;"
                          placeholder="请选识别方式选择"
                        >
                          <el-option label="证件号" :value="0"></el-option>
                          <el-option label="手机号" :value="1"></el-option>
                          <el-option label="IP地址" :value="2"></el-option>
                        </el-select>
                      </div>
                    </div>
                  </div>

                  <div style="margin-bottom: 20px;">
                    <div style=" margin: 0.1rem 0; ">不发货地区设置</div>
                    <div>
                      <div class="flexc" style="padding-bottom: 20px;">
                        <!-- <div style="margin-right: 20px;"><el-radio v-model="form.bufahuodiqu" label="2">使用产品的不发货区域</el-radio></div> -->
                        <div style="margin-right: 20px;">
                          <el-radio v-model="form.deliver_type" :label="1">设置不发货区域</el-radio>
                        </div>
                        <div>
                          <el-radio v-model="form.deliver_type" :label="3">设置只发货区域</el-radio>
                        </div>
                      </div>
                      <div
                        style="background: rgb(241, 241, 241); padding-bottom: 20px;"
                        v-if="form.deliver_type == 1"
                      >
                        <div
                          style="color: #999; font-size: 12px; padding: 10px 23px;"
                        >设置后用户只能选择选中的省市为收货地址</div>
                        <div style="padding-left: 23px;">
                          <el-cascader
                            :options="options"
                            v-model="form.nodeliver_area"
                            style="width: 4rem;"
                            collapse-tags
                            :props="props"
                            clearable
                          ></el-cascader>
                        </div>
                      </div>
                      <div
                        style="background: rgb(241, 241, 241); padding-bottom: 20px;"
                        v-if="form.deliver_type == 3"
                      >
                        <div
                          style="color: #999; font-size: 12px; padding: 10px 23px;"
                        >设置后用户不能选择选中的省市为收货地址</div>
                        <div style="padding-left: 23px;">
                          <el-cascader
                            ref="test"
                            :options="options"
                            v-model="form.deliver_area"
                            style="width: 4rem;"
                            collapse-tags
                            :props="props"
                            clearable
                            @change="test"
                          ></el-cascader>
                        </div>
                      </div>
                      <div
                        style=" background: rgb(241, 241, 241); padding:0 20px;"
                        v-if="form.deliver_type == 3"
                      >
                        <div class="flexc">
                          <div style="line-height: 32px;">批量上传地址</div>
                          <div style="margin-left: 10px;">
                            <el-upload :show-file-list="false" action="#" :http-request="upup">
                              <el-button type="text">点击上传</el-button>
                            </el-upload>
                          </div>
                          <el-button type="text" @click="down" style="margin-left: 50px;">模板下载</el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <el-button round class="inStore" @click="xiugai">保存</el-button>
          </el-form>
        </div>
      </div>
    </div>

    <van-popup
      v-if="shoujiban"
      v-model="dealModal"
      closeable
      position="bottom"
      :style="{ height: '40%',padding:'15px 15px 0 15px',borderRadius:'20px 20px 0 0', }"
    >
      <van-list>
        <van-cell
          v-for="item in xieyilist"
          :key="item.id"
          :title="item.title"
          @click="selectIds(item)"
        />
      </van-list>
    </van-popup>
  </div>
</template>

<script>
import { bufahuodiqu } from "../../assets/bufahuodiqu.js";
import left from "../left.vue";
import top from "../top.vue";
import footers from "../footer.vue";
import chuantu from "@/components/chuantu.vue";
import fuwenben from "@/components/fuwenben.vue";
import topandleft from "../topandleft.vue";
export default {
  name: "bianjishangpin",
  components: {
    left,
    chuantu,
    fuwenben,
    top,
    topandleft,
    footers
  },
  data() {
    return {
      form: {
        selling_point: [],
        delivery_city: [],
        no_city: [],
        yuyin_type: 0,
        is_pick_num: 1,
        card_fee:0
      },
      zidong: false,
      loading: true,
      relo: true,
      options: [],
      props: {
        multiple: true
      },
      shangpinyeshow: false, //重要
      xieyilist: [],

      shoujiban: false,
      loading: false,
      finished: false,
      dealModal: false,
      dealList: {}
    };
  },
  created() {
    this.getxieyi();
  },
  mounted() {
    // add 就是商品页添加新商品  fix是商品页商品修改
    if (this.$route.query.type == "add") {
      //获取要商品详情
      this.getdetail(this.$route.query.page_id);
      this.shangpinyeshow = true;

      this.options = bufahuodiqu;
    } else {
      if (this.$route.query.type == "fix") {
        this.getdetail(this.$route.query.id);
        this.shangpinyeshow = true;
        this.options = bufahuodiqu;
      } else {
        //店铺的商品
        this.getdetail(this.$route.query.id);
      }
    }
    if (window.screen.width < 1080) {
      this.shoujiban = true;
      var h = document.documentElement.clientWidth / 7.5 + "px";
      document.documentElement.style.fontSize = h;

      // this.onLoad()
    } else {
    }
  },
  methods: {
    selectIds(item) {
      this.dealList = item;
      this.form.pact_ids = item.id.toString();
      this.dealModal = false;
    },
    checkoutClick() {
      this.dealModal = true;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    getxieyi: function() {
      axios.get("/own/network/pact/get").then(response => {
        if (response.data.msg.code == 0) {
          this.xieyilist = response.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    down: function() {
      const a = document.createElement("a");
      a.setAttribute("download", "只发货省市区上传.xlsx");
      a.setAttribute(
        "href",
        location.origin + "/hou/static/xlsx/bufahuoshengshiqu.xlsx"
      );
      a.click();
    },
    changeneed_idcard: function() {
      if (this.form.need_idcard == 0) {
        this.form.same_name = 0;
      }
    },
    upup: function(file) {
      var params = new FormData();
      params.append("file", file.file);
      axios.post(`/api/delivery/data`, params).then(response => {
        if (response.data.msg.code == 0) {
          this.form.deliver_type = "1";
          this.form.deliver_area = response.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    getimg: function(item) {
      this.form.image1 = item;
    },
    getimg2: function(item) {
      this.form.share_img = item;
    },
    getimg3: function(item) {
      this.form.custom_photo_illustration = item;
    },
    getcontent: function(item) {
      this.form.description = item;

      const fonts = document.getElementsByTagName('font');
      for (let font of fonts) {
          const face = font.getAttribute('face');
          if (face) {
              font.style.setProperty('font-family', `"${face}"`, 'important');
              console.log(`修复字体: ${face}`);
          }
      }
    },

    xiugai: function() {
      let all = JSON.parse(JSON.stringify(this.form));
      if (this.form.selling_point.length > 0) {
        all.selling_point = JSON.stringify(this.form.selling_point);
      } else {
        all.selling_point = "";
      }
      let url = "";
      if (this.$route.query.type == "add" || this.$route.query.type == "fix") {
        if (this.form.deliver_area.length > 0) {
          all.deliver_area = JSON.stringify(this.form.deliver_area);
        } else {
          all.deliver_area = "";
        }
        if (this.form.nodeliver_area.length > 0) {
          all.nodeliver_area = JSON.stringify(this.form.nodeliver_area);
        } else {
          all.nodeliver_area = "";
        }
        url = "/own/fpage/make";
        if (this.$route.query.type == "add") {
          all.id = "";
          all.flow_id = this.$route.query.flow_id;
          all.page_id = this.$route.query.page_id;
        }
        if (this.$route.query.one) {
          if (!this.form.page_source) {
            this.$message.error("订单来源必填");
            return false;
          }
        }
      } else {
        url = "/own/page/update";
      }

      axios.post(url, all).then(response => {
        if (response.data.msg.code == 0) {
          this.$message.success("修改成功");
          this.back();
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },

    getdetail: function(id) {
      let url = "";
      if (this.$route.query.type == "fix") {
        url = "/own/fpage/manage";
      } else {
        url = "/own/page/info";
      }
      axios.get(url, { params: { id: id } }).then(response => {
        if (response.data.msg.code == 0) {
          if (response.data.data.selling_point) {
            response.data.data.selling_point = JSON.parse(
              response.data.data.selling_point
            );
          } else {
            response.data.data.selling_point = [];
          }
          if (response.data.data.deliver_area) {
            response.data.data.deliver_area = JSON.parse(
              response.data.data.deliver_area
            );
          } else {
            response.data.data.deliver_area = [];
          }
          if (response.data.data.nodeliver_area) {
            response.data.data.nodeliver_area = JSON.parse(
              response.data.data.nodeliver_area
            );
          } else {
            response.data.data.nodeliver_area = [];
          }
          if (this.$route.query.type == "add") {
            response.data.data.sale_name = response.data.data.title;
            response.data.data.need_idcard = 1;
            response.data.data.same_name = 1;
            // response.data.data.is_need_photo = 1

            if (response.data.data.show_type == undefined) {
              response.data.data.show_type = 1;
            }
          }

          this.form = response.data.data;
          // console.log(this.form.yuyin_type)
          console.log("this.form66", this.form);
          if (!this.form.pact_check) {
            this.form.pact_check = 2;
          }

          this.relo = false;
          this.$nextTick(() => {
            this.relo = true;
          });

          this.loading = false;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    }
  }
};
</script>


<style scoped lang="less">
.bianjishangpin {
  .sxjact {
    background: rgb(0, 90, 255);
    border-radius: 30px;
    font-size: 24px;
    text-align: center;
    font-weight: 500;
    color: rgb(255, 255, 255);
    width: 150px;
    height: 60px;
    margin-right: 30px;
  }
  .sxj {
    background: rgb(227, 232, 241);
    border-radius: 30px;
    font-size: 24px;
    text-align: center;
    font-weight: 500;
    color: rgb(175, 179, 188);
    width: 150px;
    height: 60px;
    margin-right: 30px;
  }
  .xt {
    width: 72px;
    height: 26px;
    margin-right: 10px;
    border-radius: 5px;
    font-size: 12px;
  }
  .lj {
    width: 100px;
    height: 32px;
    color: rgb(64, 66, 71);
    background: rgb(227, 232, 241);
    border-radius: 16px;
    margin-right: 20px;
    font-size: 14px;
    cursor: pointer;
  }
  .ljact {
    width: 100px;
    height: 32px;
    color: rgb(0, 90, 255);
    background: rgb(228, 237, 255);
    border-radius: 16px;
    margin-right: 20px;
    font-size: 14px;
    cursor: pointer;
  }
  /deep/ .el-form-item {
    margin-bottom: 0;
  }

  /deep/ .el-switch__core {
    width: 46px !important;
    height: 21px;
    border-radius: 20px;
    background: rgb(246, 248, 251);
    border: 1px solid rgb(227, 232, 241);
  }
  /deep/ .el-switch.is-checked .el-switch__core {
    border-color: rgb(0, 90, 255) !important;
    background-color: rgb(0, 90, 255) !important;
  }
  /deep/ .el-switch.is-checked .el-switch__core::after {
    margin-left: -18px;
    left: 100% !important;
  }
  /deep/ .el-switch__core:after {
    width: 17px;
    height: 17px;
    top: 1px;
    left: 1px;
    background: rgb(227, 232, 241);
  }

  /deep/ .el-cascader {
    width: 300px;
  }
  /deep/ .el-input-group__append {
    border-radius: 0 20px 20px 0;
  }
  /deep/ .t_yuan .el-input__inner {
    border-radius: 20px 0 0 20px !important;
    border-right: none !important;
  }
  /deep/ .van-nav-bar__text {
    color: #000000;
  }
  /deep/ .van-nav-bar .van-icon {
    color: #000000;
  }
  .title_input_box {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    background: #f6f8fb;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .title_input_boxs {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    background: #f6f8fb;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  /deep/ .title_input_box .title_input .el-input__inner {
    border: 0 !important;
    height: 50px;
    width: 260px;
  }
  /deep/ .title_input_boxs .title_inputs .el-input__inner {
    border: 0 !important;
    height: 50px;
    width: 200px;
  }
  /deep/ .point_inpt .el-input__inner {
    border: 0 !important;
    height: 50px !important;
    border-radius: 10px !important;
  }
  /deep/ .voice_input .el-input__inner {
    border: 0 !important;
    height: 50px !important;
    border-radius: 10px !important;
  }
  .upload_box {
    display: flex;
    align-items: center;
    padding: 10px 10px;
    width: 100%;
    height: 180px;
    background: #f6f8fb;
    border-radius: 10px;
  }
  .deal_checkbox {
    display: flex;
    margin-top: 10px;
    font-size: 14px;
  }
  /deep/ .deal_checkbox .el-checkbox__inner {
    border-radius: 50%;
  }
  .Richtext {
    width: 100%;
    background: #f6f8fb;
    border-radius: 10px;
    height: 100%;
  }
  .inStore {
    width: 100%;
    height: 45px;
    color: white;
    background: #005aff;
    font-size: 16px;
    border-radius: 25px;
    margin-top: 40px;
  }
  /deep/ .van-popup {
    z-index: 99999999999999999 !important;
  }
  /deep/ .van-overlay {
    z-index: 10002 !important;
  }
}
</style>

